<template>
    <div class="appoint">
        <!-- 预约套餐 -->
        <div class="left-part" v-show="!isAppo">
            <h3>选择套餐</h3>
            <div class="left-list">
                <ul>
                    <li v-for="($index,item) in setMealList" @click="selectSetMeal($index,item)" :class="{'border':$index==clickIndex}">
                        <img :src="headimg" alt="Not Find" />
                        <div class="msg">
                            <span v-text="item.tcmc" :class="['title',{'active':$index==clickIndex}]"></span>
                            <span class="price">￥{{item.jg}}</span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 预约详情 -->
        <div class="right-part" v-show="!isAppo">
            <div class="detail-title">
                <dl>
                    <dt><img :src="headimg" alt="" class="title-img" /></dt>
                    <dd>
                        <h3 v-text="setMealDetail.tcmc"></h3>
                        <p v-text="setMealDetail.tcjs"></p>
                        <p>
                            <label for="">适用:</label>
                            <span class="item-property" v-text="setMealDetail.mc"><!-- 中年体检 青年体检 职场金领 职场白领 --></span>
                            <span class="price">￥{{setMealDetail.jg}}</span>
                        </p>
                    </dd>
                </dl>
            </div>
            <div class="select-date">
                <label for="">体检时间:</label>
                <input id="date-appo" type="text" placeholder="请选择体检时间" />
                <button @click="appointmentNow">立即预约</button>
            </div>
            <div class="meal-item">
                <h3>套餐详情</h3>
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th class="col-md-4">序号</th>
                            <th class="col-md-4">项目名称</th>
                            <th class="col-md-4">检查项目内容及意义</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="($index,item) in setMealItemDetail">
                            <td class="col-md-4" v-text="$index+1"></td>
                            <td class="col-md-4" v-text="item.xmmc"></td>
                            <td class="col-md-4 ellipsis" v-text="item.bz" title="{{item.bz}}"></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <!-- 立即预约 -->
        <div class="appointment" v-show="isAppo">
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th class="col-md-3">套餐信息</th>
                        <th class="col-md-3">数量</th>
                        <th class="col-md-3">体检时间</th>
                        <th class="col-md-3">套餐费用</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="col-md-3">
                            <img :src="headimg" alt="" class="preview" />
                            <span class="meal-name" v-text="setMealDetail.tcmc"></span>
                        </td>
                        <td class="col-md-3">1</td>
                        <td class="col-md-3">
                            <input id="medical-time" type="text" :disabled="changeTime" v-model="appoMsg.date" value="{{appoMsg.date}}" @blur="unChangePrevTime" />
                            <button @click="changePrevTime">我要修改时间</button>
                        </td>
                        <td class="col-md-3">￥{{appoMsg.jg}}</td>
                    </tr>
                </tbody>
            </table>
            <div class="opera">
                <button @click="confirmAppointment">确认预约</button>
                <button @click="cancelAppointment">取消预约</button>
            </div>
        </div>
    </div>
</template>
<script>
import 'assets/lib/bootstrap-3.3.2/css/bootstrap.min.css'
import 'assets/lib/bootstrap-3.3.2/js/bootstrap.min.js'
//日期
import 'assets/lib/laydate/laydate.js';
import 'assets/lib/laydate/need/laydate.css';
import 'assets/lib/laydate/skins/yahui/laydate.css';
import 'assets/reset.css'
import Public from 'assets/public.js'
var headimg = require("assets/img/cs11.jpg");
export default {
    data() {
            return {
                headimg: headimg,
                setMealList: [],
                //点击获取索引值
                clickIndex: 0,
                //套餐详情
                setMealDetail: {},
                //获取套餐项目详情
                setMealItemDetail: {},
                //是否显示预约详情
                isAppo: false,
                //修改预约时间
                changeTime: 'disabled',
                //预约信息
                appoMsg: {
                    jg: 0,
                    date: '',
                    tcbh: '00',
                    mpiId: ''
                }
            }
        },
        computed: {

        },
        components: {

        },
        ready() {
            //获取套餐列表
            this.getSetMealList();
            //初始化日期插件
            this.initDatePlugin();
        },
        events: {

        },
        watch: {

        },
        methods: {
            //获取套餐列表
            getSetMealList () {
                $.when(Public.commonajax('coms.physicalExamService','queryExamPackage','[]')).done(res=> {
                    this.setMealList = res.body;
                    //默认渲染首条套餐
                    this.selectSetMeal(this.clickIndex,this.setMealList[0]);
                });
            },

            //获取套餐项目详情
            selectSetMeal (index,item) {
                this.clickIndex = index;
                this.setMealDetail = item;
                this.appoMsg.jg = item.jg;
                this.appoMsg.tcbh = item.tcbh;
                $.when(Public.commonajax('coms.physicalExamService','getPhysicalExam','['+item.tcbh+']')).done(res=> {
                    this.setMealItemDetail = res.body;
                });
            },

            //立即预约
            appointmentNow () {
                this.appoMsg.date = $('#date-appo').val();
                if(this.appoMsg.date == ''){
                    Public.ajaxPrompt('请选择预约时间!');
                    return false;
                };
                this.isAppo = true;
                this.appoMsg.mpiId = this.$parent.mpiIds;
            },

            //修改预约时间
            changePrevTime () {
                this.changeTime = false;
            },

            //失去焦点不许修改时间
            unChangePrevTime () {
                this.changeTime = true;
            },

            //确认立即预约
            confirmAppointment () {
                this.appoMsg.date = $('#medical-time').val();
                $.when(Public.commonajax('coms.physicalExamService','order','['+JSON.stringify(this.appoMsg)+']')).done(res=> {
                    if(res.code == 200){
                        this.isAppo = false;
                        Public.ajaxPrompt(res.body);
                    }else{
                        res.msg = res.msg.length>30 ? '预约失败!' : res.msg;
                        Public.ajaxPrompt(res.msg);
                    }
                });
            },

            //取消立即预约
            cancelAppointment () {
                this.isAppo = !this.isAppo;
                $('#date-appo').val($('#medical-time').val());
            },

            //初始化日期插件
            initDatePlugin () {
                laydate({
                    elem: '#date-appo',
                    min: laydate.now()
                    /*format: 'YYYY-MM-DD hh:mm:ss',
                    istime: true*/
                });
                laydate({
                    elem: '#medical-time',
                    min: laydate.now()
                });
            }
        }
}
</script>
<style scoped>
  .table th,.table td{
    text-align: center;
  }
  .left-part,.right-part{
    height: 650px;
    overflow: auto;
    float: left;
  }
  .left-part{
    width: 30%;
    background-color: #fff;
    border-radius: 10px 0 0 10px;
  }
  .right-part{
    width: 70%;
    background-color: #fff;
    border-radius: 0px 10px 10px 0;
  }

  .left-part h3{
    padding-left: 20px;
    color: #fff;
    font-size: 18px;
    height: 60px;
    line-height: 60px;
    background-color: #9E3110;
  }
  .left-part ul li{
    height: 84px;
    margin: 8px 0;
    cursor: pointer;
  }
  .left-part ul li:hover{
    border: 2px solid #1DC499;
  }
  /*点击套餐样式*/
  .left-part ul li.active{
    color: #1DC499;
  }
  .left-part ul li .msg span.active{
    color: #1DC499;
  }
  .left-part ul li.border{
    border: 2px solid #1DC499;
  }

  .left-part ul li img{
    width: 80px;
    height: 80px;
    float: left;
  }
  .left-part ul li .msg{
    float: right;
    width: 185px;
    padding-top: 18px;
  }
  .left-part ul li .msg span{
    display: block;
  }
  .left-part ul li .msg span.title{
    width: 78%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .left-part ul li .msg span.price{
    color: #f00;
  }

  .right-part{
    padding: 20px;
  }
  .right-part .detail-title{
    height: 180px;
    background: #FAFAFA;
  }
  .right-part .detail-title dl dt{
    float: left;
    width: 40%;
  }
  .right-part .detail-title dl dd{
    float: right;
    width: 60%;
  }
  .right-part .detail-title dl dt img.title-img{
    width: 200px;
    height: 180px;
    margin-right: 10px;
  }
  .right-part .detail-title dl dd p{
    margin: 10px;
  }
  .right-part .detail-title dl dd span.item-property{
    color: #1FC59A;
  }
  .right-part .detail-title dl dd span.price{
    color: #f00;
    font-size: 24px;
    display: block;
    margin-top: 10px;
  }

  .right-part .select-date{
    padding: 25px 0;
    margin: 10px 0;
    background: #FFFCF4;
  }
  .right-part .select-date label,.right-part .select-date input{
    display: inline-block;
    height: 30px;
    line-height: 30px;
  }
  .right-part .select-date input{
    outline: none;
    border: 1px solid #ccc;
    height: 20px;
    line-height: 20px;
    text-indent: 10px;
    background: url(../assets/img/calendar.png) no-repeat right center;
  }
  .right-part .select-date button{
    border-radius: 16px;
    background-color: #FB8E24;
    text-align: center;
    width: 170px;
    height: 30px;
    line-height: 30px;
    float: right;
    margin-right: 30px;
    color: #fff;
  }
  .right-part .meal-item h3{
    color: #9E3110;
    text-indent: 10px;
    font-size: 18px;
    margin-bottom: 5px;
    background: url(../assets/img/orangered-border.png) no-repeat left center;
  }
  .right-part .meal-item table td.ellipsis{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #medical-time{
    text-align: center;
  }
  #medical-time + button{
    margin-top: 4px;
    padding: 2px 5px;
  }
  .opera button{
    border-radius: 16px;
    width: 100px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    float: right;
    margin-right: 20px;
  }
  .opera button:first-child{
    background-color: #42B27A;
    color: #fff;
  }
  .opera button:last-child{
    background-color: #fff;
  }

</style>
